
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>会员信息页面</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
	<script type="application/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" >

	// $(document).ready(function(){
	// 	loadUser();
	// })
	// //连接servlet 获取 数据
	// function loadUser(){
	// 	$.ajax({
	// 		url:"${pageContext.request.contextPath}/getUserList",
	// 		method:"get",
	// 		success:function(data){
	// 			showMsg(data);
	// 		},
	// 		error:function(XMLHttpRequest,textStatus,errorThrown){
	// 			alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
	// 		}
	// 	});
	// }
	// //显示用户信息
	// function showMsg(data){
	// 	var list = JSON.parse(data);
	// 	$("#tb_list").html("<tr class='tr_head'><td>编号</td><td>邮箱</td><td>姓名</td><td>性别</td><td>类别</td><td>操作</td></tr>");
	// 	var i = 1;
	// 	for(var u in list){
	// 		//声明 tr  td  对象
	// 		var tr = $("<tr></tr>");
	// 		var td1 = $("<td>"+(i++)+"</td>");
	// 		var td2 = $("<td>"+list[u].email+"</td>");
	// 		var td3 = $("<td>"+list[u].username+"</td>");
	// 		var td4 = $("<td>"+list[u].gender+"</td>");
	// 		var td5 = $("<td>"+(list[u].role==0?"管理员":"会员")+"</td>");
	// 		var td6 = $("<td><a href='javascript:delUser("+list[u].id+")' class='btn btn-primary btn-xs'>删除</a></td>");
	//
	// 		//将td 添加到tr中
	// 		tr.append(td1);
	// 		tr.append(td2);
	// 		tr.append(td3);
	// 		tr.append(td4);
	// 		tr.append(td5);
	// 		tr.append(td6);
	// 		$("#tb_list").append(tr);
	// 	}
	// }
	// //删除用户
	// function delUser(id){
	// 	if(confirm("确认要删除吗?")){
	// 		$.ajax({
	// 			url:"${pageContext.request.contextPath}/deleteUser?id="+id,
	// 			method:"get",
	// 			success:function(data){
	// 				loadUser();
	// 			},
	// 			error:function(XMLHttpRequest,textStatus,errorThrown){
	// 				alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
	// 			}
	// 		})
	// 	}
	// }
	// //条件查询
	// $(function(){
	// 	//给查询按钮 添加 点击事件
	// 	$("#search").click(function(){
	// 		var username = $("input[name='username']").val();
	// 		var genders = $("input[name='gender']");
	// 		var gender = "";
	// 		for(var i=0;i<genders.length;i++){
	// 			if(genders[i].checked){
	// 				gender += genders[i].value;
	// 			}
	// 		}
	// 		//使用ajax 进行异步交互
	// 		$.ajax({
	// 			url:"${pageContext.request.contextPath}/searchUser?username="+username+"&gender="+gender,
	// 			method:"post",
	// 			success:function(data){
	// 				if(data==0){
	// 					alert("未找到指定内容");
	// 					$("input[name='username']").val("");
	// 					$("input[name='gender']").removeAttr("checked");
	// 				}else{
	// 					showMsg(data);
	// 				}
	// 			},
	// 			error:function(XMLHttpRequest,textStatus,errorThrown){
	// 				alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
	// 			}
	// 		})
	// 	})
	// })
</script>
</head>
<body>
	
	<div class="row" style="width: 100%;">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading">会员列表</div>
					<div class="panel-body">
					<!-- 条件查询 -->
						<div class="row">
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
								<div class="form-group form-inline">
									<span>用户电话</span>
									<input type="text" name="usertel" class="form-control">
								</div>
							</div>
							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
								<div class="form-group form-inline">
									<span>EMAIL</span>
									<input type="text" name="email" class="form-control">
									&nbsp;&nbsp;&nbsp;&nbsp;
								</div>
							</div>
							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
								<button type="button" class="btn btn-primary" id="search"><span class="glyphicon glyphicon-search"></span></button>
							</div>
						</div>
				<!-- 列表显示 -->
						<table id="tb_list" class="table table-striped table-hover table-bordered">
							<tr>
								<td>序号</td><td>电话</td><td>EMAIL</td><td>invitation</td><td>操作</td>
							</tr>
<!--							<tr><td>1</td><td>admin</td><td>123@126.com</td><td>禁言| 密码找回</td></tr>-->
							 <tr v-for="us in users">




								 <td>{{us.id}}</td><td>{{us.tel}}</td><td>{{us.email}}</td><td>{{us.invitation}}</td>
								 <td>
								 <button @click="del(us.id)">删除</button>
								 |
								 <button @click="update(us.id)">修改</button>
							 </td>


							 </tr>
						</table>

						<!--修改模态窗体-->
						<div class="modal fade" id="modalModify">
							<div class="modal-dialog" >
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">X</button>
										<h4 class="modal-title">用户信息修改：</h4>
									</div>
									<div class ="modal-body" >
										<div class="input-group">
											<span class="input-group-addon">ID:</span>
											<input class="input-sm" type="text" readonly="readonly" id="id" placeholder="1" v-model="userInfo.id"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">TEL:</span>
											<input class="input-sm" type="text" id="tel" placeholder="1" v-model="userInfo.tel"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">EMAIL:</span>
											<input class="input-sm" type="text" id="email" placeholder="1" v-model="userInfo.email"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">INVATITION:</span>
											<input class="input-sm" type="text" id="invatition" placeholder="1" v-model="userInfo.invatition"/>
										</div>

									</div>
									<div class = "modal-footer">
										<button type="button" class="btn btn-default" data-dismiss ="modal">取消</button>
										<button type="button" class="btn btn-primary" id="modify">修改</button>
									</div>
								</div>
							</div>
						</div>

						
					</div>
				</div>
			</div>
		</div>
     <script>
		 // 与模态框绑定的对象
		 var  info=new Vue({
			 el:'#modalModify',
			 data:{
			 	userInfo:{}
			 }
		 });
		 // 与表格绑定
		 var userInfos=new Vue({
			 el:'#tb_list',
			 data:{
			 	users:[]
			 },
			 methods: {
			 	del: function (id) {
			 		alert("删除：" + id);
			 		$.ajax({
						url:'/delSysUser?id='+id,
						type:"delete",
						dataType:'json',
						success:function(res){
							if (res.statusCode == 200){
								alert("ok"+res.msg);
								//重新加载数据
								loadUser();
							}

						}
					});
				},

				update: function (id) {
			 		alert("修改：" + id)
					$.ajax({
						url:'/getUserInfoById?id='+id,
						type:'get',
						dataType:'json',
						success:function (res) {
							if (res.statusCode ==200){
								console.log(res.data);
								info.userInfo=res.data;
								$("#modalModify").modal("show");//显示模态框

							}
						}
					})
				}
			 }
		 })
		 //修改完后关闭模态窗体
		 $("#modify").click(function () {
			 alert("关闭模态窗体");
			 $.ajax({
				 url:'/modify',
				 type:'PUT',
				 data:JSON.stringify(info.userInfo),//将json对象转为json字符串
				 contentType:'application/json',
				 dataType:'json',
				 success:function (res){
					 if(res.statusCode==200){
					 	alert(res.msg);
					 	$("#modalModify").modal("hide");//关闭模态框
						 loadUser();
					 }
				 }

					 

			 })
		 })
		 //jquery工厂函数
		 $(function () {
			loadUser() ;
		 });
		function loadUser() {
		 	//页面加载完时,向后端发送ajax请求
			 $.ajax({
				 url:'/getSysUser',
				 type:'post',
				 dataType:'json',
				 success:function (res) {
					 console.log(res);
					 userInfos.users=res;
				 }
			 })

		 }
	 </script>
</body>
</html>